<!--
 * @Author: wuzhen
 * @Date: 2019-12-04 17:56:54
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-09 14:30:06
 * @Description: 用户管理
 -->
<template>
  <Card style="width:100%" dis-hover>
    <!-- 搜索表头/表头按钮 -->
    <search-table :search-props="searchProps" @handle-filter="handleFilter" :label-width="100">
    </search-table>
    <wz-table ref="table" :search-api="searchApi" :columns="columns" />
    <!-- 被举报 -->
    <Modal v-model="showReport" footer-hide width="650">
      <div slot="header">
        <span style="color:#3399ff;margin-right:10px;">被举报次数：{{dataReportTotal}}次</span>
        <!-- <span style="color:#ff8d1a">共2人举报该用户</span> -->
      </div>
      <Table :columns="columnsReport" :data="dataReport"></Table>
      <div style="margin-top:20px;text-align:right" v-if="dataReportTotal">
        <Page :current="reportPage" :page-size="reportSize" @on-page-size-change="changeReportSize" :total="dataReportTotal" @on-change="changeReportPage" show-total show-sizer />
      </div>
    </Modal>
    <Modal title="图片预览" v-model="showImg" footer-hide>
      <img src="https://res.squrab.com/0e55f7842ae529a8e744bd075583035b.jpg" v-if="showImg" style="width: 100%">
    </Modal>
  </Card>
</template>
<script>
import index from "./mixins";
import {
  getComplaintList,
  findComplaintDetail,
  updateStatus
} from "@/request/api";
export default {
  mixins: [index],
  data() {
    return {
      searchApi: getComplaintList,
      apiParams: {
        flipper: {
          offset: 0,
          limit: 15,
          sort: "createtime desc"
        }
      },
      showReport: false,
      columnsReport: [
        {
          title: "举报原因",
          render: (h, params) => {
            const row = params.row;
            return h("span", row.complaintcontent);
          }
        },
        {
          title: "举报时间",
          width: 170,
          render: (h, params) => {
            const row = params.row;
            return h("span", this.$fmtMoment(row.createtime));
          }
        },
        {
          title: "举报人",
          render: (h, params) => {
            const row = params.row;
            return h("p", row.complaintusername);
          }
        }
        // {
        //   title: "图片",
        //   width: 70,
        //   render: (h, params) => {
        //     const row = params.row;
        //     console.log(row);
        //     return h(
        //       "span",
        //       {
        //         class: {
        //           primary: true
        //         },
        //         on: {
        //           click: () => {
        //             this.showImg = true;
        //           }
        //         }
        //       },
        //       "查看"
        //     );
        //   }
        // }
      ],
      dataReport: [],
      reportPage: 1,
      reportSize: 10,
      dataReportTotal: 0,
      showImg: false
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取table数据
    getData() {
      this.$refs.table.getData(this.apiParams);
    },
    // 搜索
    handleFilter(params) {
      this.apiParams["bean"] = { ...params };
      this.apiParams["flipper"] = {
        offset: 0,
        limit: 15,
        sort: "createtime desc"
      };
      this.getData();
    },
    handleClick(type, row) {
      this.id = row.userid;
      switch (type) {
        case "on": // 启用
          this.editStatus(row);
          break;
        case "offline": // 强制下线
          this.editOnlinestatus(row);
          break;
        default:
          break;
      }
    },
    // 获取举报数据
    async getReportData(id) {
      try {
        const res = await findComplaintDetail({ targetid: id });
        this.dataReport = res.result.rows;
        this.dataReportTotal = res.result.total;
      } catch (error) {
        throw error;
      }
    },
    // 启用、停用
    async editStatus(row) {
      try {
        const res = await updateStatus({
          userid: row.userid,
          status: row.status === 10 ? 40 : 10
        });
        if (res.code === 200) {
          this.$Message.success("操作成功");
          if (row.status === 10) {
            row.status = 40;
          } else {
            row.status = 10;
          }
        }
      } catch (error) {
        throw error;
      }
    },
    changeReportSize() {},
    changeReportPage() {}
  }
};
</script>
